<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>姓名案例用watch写</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
 computed和watch之间的区别：
   1.只要是computed能完成的功能，watch都可以完成
   2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
 总结出的规律：
    1.所被Vue管理的函数，都要写成普通函数，这样this的指向就是vm 或 组件实例对象。
    2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数），最好写成箭头函数。
 -->
<div id="root">
   姓: <input type="text" v-model="firstName">
    名: <input type="text" v-model="lastName">
    姓名: <input type="text" v-model="fullName">
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    const vm=new Vue({
        el:"#root",
        data:{
            firstName:'张',
            lastName:'三',
            fullName:" "
        },
        watch:{
           firstName:{
                immediate:true,
                handler(newValue,oldValue){
                    console.log('firstName被修改了',newValue,oldValue)
                    this.fullName=this.firstName+"-"+this.lastName
                }
            },
            lastName(value) {
                console.log('lastName被改为:',value)
                setTimeout(()=>{
                    this.fullName=this.firstName+"-"+this.lastName
                },1000)
            },
            fullName(value){
               const arr=value.split("-")
                this.firstName=arr[0]
                this.lastName=arr[1]
            }
        }
    })
</script>
</body>
</html>
